<template>

    <el-menu unique-opened :mode="setting.sidebar" :collapse="false">
      <sidebar-item ref="sidebarItem" :menu="subMenu" first></sidebar-item>
    </el-menu>

</template>

<script>
import { mapGetters } from "vuex";
import sidebarItem from "./sidebarItem";
export default {
  name: "zpSidebar",
  components: { sidebarItem },
  data() {
    return {
      reload: true,
      subMenu: [],
    };
  },
  created() {
    this.$nextTick(() => this.findMenu(this.menu, this.$route.path));
  },
  watch: {
    isHorizontal() {
      this.reload = false;
      this.$nextTick(() => {
        this.reload = true;
      });
    },
  },
  computed: {
    ...mapGetters([
      "isHorizontal",
      "setting",
      "website",
      "menu",
      "tag",
      "screen",
      "menuId",
    ]),
    nowTagValue: function() {
      return this.$router.$avueRouter.getValue(this.$route);
    },
  },
  methods: {
    findMenu(ml, path) {
      const sidebarItem = this.$refs.sidebarItem;
      ml.forEach((m) => {
        if (path === m.path) {
          this.subMenu = m.alwaysShow ? m.children : ml;
          if (m.children && m.children.length > 0) {
            sidebarItem.open(this.subMenu[0]);
          }
        } else if (m.children && m.children.length) {
          this.findMenu(m.children, path);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
